<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%@ taglib prefix="my" uri="http://amani.com/function-taglib"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>购物车</title>
<%@ include file="../shared/common_header.jsp"%>
</head>
<body>
	<section id='shopping-cart'>
		<header class="bar bar-nav">
		  <a class="btn-check  pull-left" rel='all' state='0'>全选</a>
		  <a disabled class="btn-delete pull-right"></a> 
		</header>
		<div class='content'>
			<ul class="table-view">
			<c:if test="${fn:length(ShopCartItems)>0  }">
			<c:forEach var="item" items="${ShopCartItems }">
			  <li class="table-view-cell" value='${item.id }'>
			  	<div class='table-view-cell-colunm-left'>
			  		<a class="btn-check  pull-left" state='0' value='${item.id }'>${item.name }</a>
			  	</div>
			  	<div class="table-view-cell-colunm-right">
				  	<div  class='table-view-cell-colunm2'>￥${item.price }</div>
				  	
				  	<div class='table-view-cell-colunm3'>X${item.num }</div>
				  	
				  	<div class='table-view-cell-colunm4'>
				  		￥<span class='price'>${item.price*item.num }</span>
				  	</div> 
			  	</div>
				<div class='clear'></div>
			  </li> 
			  </c:forEach>
			  </c:if>
			</ul>
			<div class="bar bar-standard bar-footer-secondary"> 
				<div class='acount'>
					<div>合计：<span>￥<span class='count-price'>0.00</span></span></div>
					<div>不包含运费</div>
				</div>
				<div class='commit'> 
					<button disabled class="btn btn-commit">结  算</button>
				</div>
			</div>
		</div>
		<form action="${ROOT_PATH }Shop/ShoppingCount" name="countForm"
		id="countForm" method="post">
			<input name="ids" id="ids" type="hidden" value="" /> 
		</form>
	</section>
	<script type="text/javascript">
		$(function(){
			$('.btn-commit').bind('click',function(e){ 
				var ids=[];
				$('.btn-check').each(function(){
					var root=this.parentNode.parentNode;
					if($(this).attr("rel")!='all'){
						if($(this).attr("state")=='1'){ 
							ids.push($(this).attr("value"));
						}
					}
				});
				var tempids="";
				for(var i=0;i<ids.length;i++){
					if(i=ids.length-1){
						tempids+=ids[i];
					}else{ 
						tempids+=ids[i]+",";
					}
				}
				$("#ids").val(tempids);
				$("#countForm").submit(); 
			});
			
			$('.btn-delete').bind('click',function(e){
				var ids=[];
				$('.btn-check').each(function(){
					var root=this.parentNode.parentNode;
					if($(this).attr("rel")!='all'){
						if($(this).attr("state")=='1'){ 
							ids.push($(this).attr("value"));
						}
					}
				});
				$(ids).each(function(){
					$.ajax({ url: "${ROOT_PATH}Shop/DeleteShoppingCartItem",data:{deleteCartItemId:this},context:this, success: function(){ 
							var removeItem='';
							var id=this;
							var cells=$(".table-view-cell");
							for(var i=0;i<cells.length;i++){
								if($(cells[i]).attr('value')==id){
									$(cells[i]).remove();
								}
							}
							var totalAccount=0; 
							var isAllUnCheck=true;
							$('.btn-check').each(function(){
								if($(this).attr("rel")!='all'){
									var root=this.parentNode.parentNode;
									if($(this).attr("state")=='1'){ 
										totalAccount+=parseFloat($('.price',$(root)).text());
									}
									isAllUnCheck&= $(this).attr("state")=='0';
								}
							});
							$(".btn-commit")[0].disabled=isAllUnCheck;
							$(".btn-delete")[0].disabled=isAllUnCheck; 
							$(".count-price").text(totalAccount);
				      }});
				});
			});
			$(".btn-check").bind('click',function(e){
				var type=$(e.currentTarget).attr("rel");
				var state=$(e.currentTarget).attr("state");
				var backgroundUrl="";
				if(state==0){ 
					 backgroundUrl='${ROOT_PATH }content/images/p4_choosed.png'; 
						$(e.currentTarget).attr("state",1);
				} else{ 
					backgroundUrl='${ROOT_PATH }content/images/p4_choose.png';
					$(e.currentTarget).attr("state",0);
				} 
				$(e.currentTarget).css('backgroundImage',"url('"+backgroundUrl+"')");
				var totalAccount=0;
				if(type=='all'){
					
					$('.btn-check').each(function(){
						var root=this.parentNode.parentNode;
						if($(this).attr("rel")!='all'){
							$(this).attr("state",state==0?1:0);
							$(this).css('backgroundImage',"url('"+backgroundUrl+"')");
							if(state==0){
								totalAccount+=parseFloat($('.price',$(root)).text());
							}
						}
					}); 

					$(".btn-commit")[0].disabled=(state==1); 
					$(".btn-delete")[0].disabled=(state==1);
				}else{
					var isAllCheck=true; 
					var isAllUnCheck=true;
					$('.btn-check').each(function(){
						if($(this).attr("rel")!='all'){
							var root=this.parentNode.parentNode;
							if($(this).attr("state")=='1'){ 
								totalAccount+=parseFloat($('.price',$(root)).text());
							}
							isAllCheck &= $(this).attr("state")=='1';
							isAllUnCheck&= $(this).attr("state")=='0';
						}
					});
					if(isAllCheck){ 
						 backgroundUrl='${ROOT_PATH }content/images/p4_choosed.png'; 
						 $('header .btn-check').attr("state",1);
					} else{ 
						backgroundUrl='${ROOT_PATH }content/images/p4_choose.png';
						$('header .btn-check').attr("state",0);
					} 
					$('header .btn-check').css('backgroundImage',"url('"+backgroundUrl+"')"); 
					$(".btn-commit")[0].disabled=isAllUnCheck;
					$(".btn-delete")[0].disabled=isAllUnCheck;
				}
				$(".count-price").text(totalAccount);
			}); 
			$(".content li").bind('click',function(e){
				var state=$('.btn-check',e.currentTarget).attr("state");
				var backgroundUrl="";
				if(state==0){ 
					 backgroundUrl='${ROOT_PATH }content/images/p4_choosed.png'; 
					 $('.btn-check',e.currentTarget).attr("state",1);
				} else{ 
					backgroundUrl='${ROOT_PATH }content/images/p4_choose.png';
					$('.btn-check',e.currentTarget).attr("state",0);
				} 
				$('.btn-check',e.currentTarget).css('backgroundImage',"url('"+backgroundUrl+"')");
				var totalAccount=0; 
				var isAllCheck=true;
				var isAllUnCheck=true;
				$('.btn-check').each(function(){

					if($(this).attr("rel")!='all'){
						var root=this.parentNode.parentNode;
						if($(this).attr("state")=='1'){ 
							totalAccount+=parseFloat($('.price',$(root)).text());
						}
						isAllCheck &= $(this).attr("state")=='1';
						isAllUnCheck&= $(this).attr("state")=='0';
					}
				});
				if(isAllCheck){ 
					 backgroundUrl='${ROOT_PATH }content/images/p4_choosed.png'; 
					 $('header .btn-check').attr("state",1);
				} else{ 
					backgroundUrl='${ROOT_PATH }content/images/p4_choose.png';
					$('header .btn-check').attr("state",0);
				} 
				$('header .btn-check').css('backgroundImage',"url('"+backgroundUrl+"')");
				$(".count-price").text(totalAccount);
				$(".btn-commit")[0].disabled=isAllUnCheck;
				$(".btn-delete")[0].disabled=isAllUnCheck;
			})
		});
	</script>
</body>
</html>